<template>
    <ElContainer class="admin-container">
        <el-header class="row" height="40px">
            <div class="col">
                <el-form :inline="true">
                    <el-form-item label="团队">
                        <el-select v-model="ruleForm.teamid" filterable clearable>
                            <el-option v-for="item in getteam" :key="item.ID" :label="item.name"
                                :value="Number(item.ID)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="团员">
                        <el-select v-model="ruleForm.userid" collapse-tags multiple filterable>
                            <el-option v-for="item in getusers" :key="item.ID" :label="item.name"
                                :value="Number(item.ID)">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>

        </el-header>
        <el-main class="admin-main">
            <el-table :data="tableData" height="100%" @sort-change="sortchange">
                <el-table-column prop="ID" label="userid" sortable="custom"></el-table-column>
                <el-table-column prop="name" label="用户" sortable="custom"></el-table-column>
                <el-table-column prop="query1" label="全部积分" sortable="custom"></el-table-column>
                <el-table-column prop="query2" label="比赛积分" sortable="custom"></el-table-column>
                <el-table-column prop="query4" label="练习积分" sortable="custom"></el-table-column>
                <el-table-column prop="query5" label="贡献积分" sortable="custom"></el-table-column>
                <el-table-column prop="query3" label="金币" sortable="custom"></el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <el-pagination @current-change="handleCurrentChange" :page-size="Number(limit)" layout="prev, pager, next"
                :total="count"></el-pagination>
        </el-footer>
    </ElContainer>
</template>

<script setup lang="ts">
import {
    onMounted,
    ref,
    watch,
    reactive,
    computed
} from "vue";
import { ElContainer, ElHeader, ElMain, ElFooter, ElMessage, ElTable, ElTableColumn, ElPagination } from "element-plus";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { asyncselectintegrallist, asyncselectteamuser, Iobj } from "../../../api";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import { assign, forEach } from 'lodash-es';

const dialogVisible = ref(false)
const dialogVisible2 = ref(false)
const ruleForm = reactive<{ teamid: number, userid: number[], type?: string }>({
    teamid: 0,
    userid: []
})
const sortable = ref<"DESC" | "ASC">("DESC");
const limit = ref(20);
const offset = ref(0);
const order = ref<keyof Studycodemodel.Iintegral>("query1");
const like = ref("");

const tableData = ref<Studycodemodel.Iintegral[]>([]);

const store = useStore(Storekey)
const getteam = computed<Studycodemodel.Iteam[]>(() => {
    return store.getters.getteam;
});
const getusers = ref<Array<Studycodemodel.Iuser | undefined>>([]);
const count = ref<number>(0);
watch(
    () => ruleForm.teamid,
    (n) => {
        if (n) {
            const team = getteam.value.find((e) => e.ID === ruleForm.teamid);
            asyncselectteamuser({
                teamid: n,
            }).then((e) => {
                const { rows } = e;
                getusers.value = rows.map((v) => {
                    const { user, username } = v;
                    if (username && user) {
                        user.name = username;
                    }
                    return user;
                });
                if (team && team.user) {
                    getusers.value.push(team.user);
                }
                ruleForm.userid = getusers.value.map((v) => v?.ID);
            });
        } else {
            getusers.value = [];
            ruleForm.userid = [];
        }
    }
);


onMounted(async () => {
    await store.dispatch('actionteam')
    start()
});


function sortchange(row: {
    order: string;
    prop: keyof Studycodemodel.Iintegral;
}) {
    const { prop } = row;
    if (row.order == "descending") {
        sortable.value = "DESC";
    } else {
        sortable.value = "ASC";
    }
    order.value = prop;
}


async function start() {
    try {
        const obj: Iobj<Studycodemodel.Iintegral> = {
            _limit: limit.value,
            _offset: offset.value,
            _order: order.value,
            _sortable: sortable.value
        }
        if (ruleForm.userid.length) {
            obj.userid = ruleForm.userid
        }
        const data = await asyncselectintegrallist(obj)
        tableData.value = data.rows.map(e => {
            const user = getusers.value.find(z => z?.ID === e.userid)
            const d:any = {}
            forEach(e, (v,k)=> {
                if(k === 'name') {
                    d[k]=v
                }else {
                    d[k] = Number(v) || 0
                }
            })
            return d
        })
        count.value = data.count
    } catch (e: any) {
        ElMessage.error(e);
    }
}


function handleCurrentChange(val: number) {
    offset.value = limit.value * (val - 1);
}

watch(()=>[limit.value, offset.value, order.value, sortable.value, ruleForm.userid, ruleForm.type], () => {
    start();
});
</script>

<style scoped>
a {
    text-decoration: none;
}
</style>

<style>
.admin-main {
    overflow: auto;
}

.admin-container {
    height: 100%;
}
</style>